<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/evaluation.css">
    <script src="js/screen.js"></script>
    <title>产品介绍-用户评价</title>
</head>

<body>
    <div class="header clearfix">
        <a class="back" href="#">
            <img src="img/back.png" alt="">
        </a>
        <h2 class="title">产品介绍</h2>
        <a class="menu">
            <img src="img/menu.png" alt="">
        </a>
    </div>
    <div class="product-img">
        <img src="img/product.png" alt="">
        <div class="info">
            <img src="img/package.png" alt="">
            <img src="img/goods.png" alt="">
            <img src="img/use.png" alt="">
        </div>
    </div>
    <div class="product-info">
        <h3 class="title">美国进口Juul烟嘴电子烟二代套装烟草薄荷奶昔烟弹戒烟电子烟</h3>
        <div class="subitem">
            <span class="ref-price">参考价：<span>¥168</span></span>
            <span class="on-sale">
                在售平台：
                <span>京东</span>
                <span>天猫</span>
            </span>
        </div>
        <div class="compare">
            <a href="#"> <img src="img/compare.png" alt=""></a>
        </div>
        <div class="option">
            <ul class="option-nav clearfix">
                <li><a href="#">基本设置</a></li>
                <li class="active"><a href="#">用户评价</a></li>
                <li><a href="#">我的评价</a></li>
                <li><a href="#">相关测评</a></li>
            </ul>
            <div class="option-content">
                <div class="score-option">
                    <div class="score clearfix">
                        <div class="score-left">
                            <h3>9.4</h3>
                            <div>
                                <img src="img/stars.png" alt="">
                            </div>
                            <span>666人评分</span>
                        </div>
                        <div class="score-right clearfix">
                            <div class="circular">
                                <svg width=".7rem" height=".7rem" viewBox="0 0 92 92">
                                    <circle cx="46" cy="46" r="40" stroke-width="3" stroke="#D1D3D7" fill="none"></circle>
                                    <circle class="roll" cx="46" cy="46" r="40" stroke-width="3" stroke="#FF5B19" fill="none"
                                        transform="matrix(0,-1,1,0,0,92)" stroke-dasharray="0 252"></circle>
                                </svg>
                                <p class="red">9.8</p>
                                <span>口碑</span>
                            </div>
                            <div class="circular">
                                <svg width=".7rem" height=".7rem" viewBox="0 0 92 92">
                                    <circle cx="46" cy="46" r="40" stroke-width="3" stroke="#D1D3D7" fill="none"></circle>
                                    <circle class="roll" cx="46" cy="46" r="40" stroke-width="3" stroke="#FF5B19" fill="none"
                                        transform="matrix(0,-1,1,0,0,92)" stroke-dasharray="0 252"></circle>
                                </svg>
                                <p class="red">9.5</p>
                                <span>操作简单</span>
                            </div>
                            <div class="circular">
                                <svg width=".7rem" height=".7rem" viewBox="0 0 92 92">
                                    <circle cx="46" cy="46" r="40" stroke-width="3" stroke="#D1D3D7" fill="none"></circle>
                                    <circle class="roll" cx="46" cy="46" r="40" stroke-width="3" stroke="#FF5B19" fill="none"
                                        transform="matrix(0,-1,1,0,0,92)" stroke-dasharray="0 252"></circle>
                                </svg>
                                <p class="red">9.4</p>
                                <span>烟雾</span>
                            </div>
                            <div class="circular">
                                <svg width=".7rem" height=".7rem" viewBox="0 0 92 92">
                                    <circle cx="46" cy="46" r="40" stroke-width="3" stroke="#D1D3D7" fill="none"></circle>
                                    <circle class="roll" cx="46" cy="46" r="40" stroke-width="3" stroke="#FF5B19" fill="none"
                                        transform="matrix(0,-1,1,0,0,92)" stroke-dasharray="0 252"></circle>
                                </svg>
                                <p class="red">9.6</p>
                                <span>便携性</span>
                            </div>
                            <div class="circular">
                                <svg width=".7rem" height=".7rem" viewBox="0 0 92 92">
                                    <circle cx="46" cy="46" r="40" stroke-width="3" stroke="#D1D3D7" fill="none"></circle>
                                    <circle class="roll" cx="46" cy="46" r="40" stroke-width="3" stroke="#FF5B19" fill="none"
                                        transform="matrix(0,-1,1,0,0,92)" stroke-dasharray="0 252"></circle>
                                </svg>
                                <p class="red">9.6</p>
                                <span>商家服务</span>
                            </div>
                        </div>
                    </div>
                    <div class="say clearfix">
                        <div class="say-left">大家都说：</div>
                        <div class="say-right">
                            <div class="good clearfix">
                                <span>口感很好45</span>
                                <span>非常方便11</span>
                                <span>有益健康15</span>
                            </div>
                            <div class="bad clearfix">
                                <span>漏油14</span>
                                <span>质量差12</span>
                                <span>漏油45</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="evaluation">
                    <div class="eva-item">
                        <div class="user clearfix">
                            <div class="user-avatar">
                                <img src="img/user.png">
                            </div>
                            <h3 class="user-name">匿名用户</h3>
                            <div class="user-stars">
                                <img src="img/stars.png" alt="">
                            </div>
                            <span>9.6</span>
                        </div>
                        <p class="text">这是评论内容这是评论内容这是评论内容这是评论内容这是评论内容这是评论内容这是评论内容这是评论内容这是评论内容</p>
                    </div>
                    <div class="eva-item">
                        <div class="user clearfix">
                            <div class="user-avatar">
                                <img src="img/user.png">
                            </div>
                            <h3 class="user-name">匿名用户</h3>
                            <div class="user-stars">
                                <img src="img/stars.png" alt="">
                            </div>
                            <span>9.6</span>
                        </div>
                        <p class="text">这是评论内容这是评论内容这是评论内容这是评论内容这是评论内容这是评论内容这是评论内容这是评论内容这是评论内容</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/evaluation.js"></script>
</body>

</html>